<template>
  <div class="my">
    <!-- 个人信息 -->
    <div class="info">
      <van-image class="myimage" round fit="cover" :src="userInfo.photo" />
      <div class="msg">
        <div class="name">{{ userInfo.name }}</div>
        <div class="birth">{{ userInfo.birthday }}</div>
      </div>
    </div>
    <!-- 我的收藏 -->
    <van-grid :column-num="3">
      <van-grid-item icon="newspaper-o" text="我的作品" />
      <van-grid-item icon="star-o" text="我的收藏" />
      <van-grid-item icon="tosend" text="阅读历史" />
    </van-grid>
    <!-- 其它信息 -->
    <van-cell-group>
      <van-cell title="编辑资料" to="/edit" is-link icon="edit" />
      <van-cell title="小智同学" to="/chat" is-link icon="edit" />
      <van-cell title="系统设置" is-link icon="edit" />
      <van-cell title="退出登录" is-link icon="edit" @click="logout" />
    </van-cell-group>
  </div>
</template>

<script>
// 导入获取用户信息的方法
// import { getProfileApi } from '@/api'
export default {
  name: 'MyView',
  data () {
    return {
      // 当前登录用户的信息
      // userInfo: {}
    }
  },
  methods: {
    logout () {
      // 直接调用mutations清除userInfo的方法
      this.$store.commit('delUserinfo')
      // 跳转到登录页
      this.$router.push('/login')
      // 轻提示
      this.$toast.success('退出成功')
    }
  },
  computed: {
    userInfo: function () {
      return this.$store.state.userInfo
    }
  },
  // 打开页面时会触发
  async created () {
    // 获取 token
    // const token = this.$store.state.token.token
    // console.log(this.$store.state.token)
    // console.log(token)
    // const res = await getProfileApi(token)
    // 保存用户信息
    // this.userInfo = res.data.data
    // 将结果保存到vuex中
    // this.$store.commit('setUserinfo', res.data.data)
    // console.log(res.data.data)
    // 直接调用actions中方法发起请求
    this.$store.dispatch('getUserInfo')
    console.log('123')
  }
}
</script>

<style lang="less">
.my {
  .info {
    display: flex;
    height: 120px;
    background-color: #3296fa;
    color: #fff;
    align-items: center;
    padding-left: 20px;
    font-size: 16px;
    .myimage {
      width: 90px;
      height: 90px;
    }
    .msg {
      margin-left: 20px;
      line-height: 30px;
    }
  }
  i.van-icon.van-icon-tosend.van-grid-item__icon {
    color: orange;
  }
}
</style>
